'use client'
import First from '@/app/components/First'
import About from '@/app/components/About'
import History from '@/app/components/History'
import Detail from '@/app/components/Detail'
import Weather from './components/Weather'
import { useRouter } from 'next/navigation'
import { useState } from 'react'


export default function Root() {

  const [tabName, setTabName] = useState('first')
  function tabHandle(tab) {
    setTabName(tab)
  }
  return (
    <div className="flex-1 flex flex-row ">
      <div className="w-1/6 min-h-max bg-white min-w-max">
        <ul className='tab'>
          <li className={'underline-hover ' + (tabName === 'first' && 'activeTab')} onClick={() => tabHandle('first')}>Home</li>
          <li className={'underline-hover ' + (tabName === 'history' && 'activeTab')} onClick={() => tabHandle('history')}>History</li>
          <li className={'underline-hover ' + (tabName === 'about' && 'activeTab')} onClick={() => tabHandle('about')}>About</li>
          <li className={'underline-hover ' + (tabName === 'weather' && 'activeTab')} onClick={() => tabHandle('weather')}>Weather</li>
          <li className={'underline-hover ' + (tabName === 'detail' && 'activeTab')} onClick={() => tabHandle('detail')}>Detail</li>
        </ul>
      </div>
      <div className="w-5/6  min-h-max bg-gray-200 relative overflow-hidden">
        {tabName === 'first' && <First></First>}
        {tabName === 'history' && <History><h1>Everyday is a happy day!</h1><p>yes</p></History>}
        {tabName === 'about' && <About>Content for detail</About>}
        {tabName === 'weather' && <Weather>Content for history</Weather>}
        {tabName === 'detail' && <Detail>Content for detail</Detail>}
      </div>
    </div>
  )
}


